<template>
  <!-- 动态 -->
  <div id="dynamic">
    <div class="content">
      <div class="content_item"
           v-for="(event, index) in userEventList"
           :key="index">
        <!-- 用户信息 -->
        <van-cell :border="false"
                  :title="event.user.nickname"
                  :label="event.eventTime | eventTime"
                  center>
          <template #icon>
            <van-image style="padding-right: 10px"
                       width="40"
                       height="40"
                       round
                       :src="event.user.avatarUrl" />
          </template>
        </van-cell>
        <!-- 动态文字内容 -->
        <p class="msg"
           v-text="event.msg" />
        <!-- 图片内容 -->
        <template v-if="event.pics">
          <!-- 只有一张图片 -->
          <template v-if="event.pics.length == 1">
            <van-image width="50%"
                       height="50%"
                       radius="10"
                       style="margin-top:10px"
                       :src="event.pics[0].originUrl" />
          </template>
          <!-- 两张或者四张图片 -->
          <template v-if="event.pics.length % 2 == 0 && event.pics.length <= 4">
            <div :class="event.pics.length == 2 ? 'evenNumbers EvenTwo' : 'evenNumbers' "
                 style="margin-top:10px">
              <van-image v-for="(pic, idx) in event.pics"
                         :key="idx"
                         width="40%"
                         height="40%"
                         :src="pic.pcSquareUrl" />
            </div>
          </template>
          <!-- 三张图片 -->
          <template v-if="event.pics.length == 3">
            <div class="three"
                 style="margin-top:10px">
              <van-image v-for="(pic, idx) in event.pics"
                         :key="idx"
                         width="40%"
                         height="40%"
                         :src="pic.pcSquareUrl" />
            </div>
          </template>
          <!-- 六张图片 -->
          <template v-if="event.pics.length == 6">
            <div class="six"
                 style="margin-top:10px">
              <van-image v-for="(pic, idx) in event.pics"
                         :key="idx"
                         width="40%"
                         height="40%"
                         :src="pic.pcSquareUrl" />
            </div>
          </template>
          <!-- 九张图片 -->
          <template v-if="event.pics.length == 9">
            <div class="nine"
                 style="margin-top:10px">
              <van-image v-for="(pic, idx) in event.pics"
                         :key="idx"
                         width="50%"
                         height="50%"
                         radius="12px"
                         style="padding-right: 10px"
                         :src="pic.pcSquareUrl" />
            </div>
          </template>
        </template>
        <!-- 歌单 -->
        <van-cell v-if="event.playlist"
                  :label="'by '+event.playlist.creator.nickname">
          <template #title>
            <p style="font-size: 14px">
              <van-badge color="#fff">
                <template #content>
                  <span :style="{
                    color: globalObj.normColor,
                    'border-radius':0,
                    border:'1px solid '+ globalObj.normColor,
                    padding:'0 5px','font-size':'14px'}">歌单</span>
                </template>
              </van-badge>
              {{event.playlist.name}}
            </p>
          </template>
          <template #icon>
            <van-image width="40"
                       height="40"
                       :src="event.playlist.coverImgUrl" />
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserEvent } from '@/api/userInfo'
import { releaseTime } from '../../../../currency'
export default {
  name: 'dynamic',
  data() {
    return {
      userId: '',
      userEventList: [],
    }
  },
  filters: {
    eventTime(val) {
      return releaseTime(val)
      //       v-for="(pic, idx) in event.pics"
      // :key="idx"
    },
  },
  methods: {
    initData() {
      getUserEvent(this.userId).then((res) => {
        this.userEventList = res.events.map((item) => {
          item.msg = JSON.parse(item.json).msg
          item.playlist = JSON.parse(item.json).playlist
          return item
        })
      })
    },
  },
}
</script>

<style scoped>
#dynamic {
  width: 100%;
  height: 100%;
  background: #fff;
}
#dynamic .content {
  width: 90%;
  margin: 0 auto;
}
.content .content_item p {
  font-size: 14px;
}
.content .content_item .van-cell {
  padding: 0.266667rem 0;
}
.content .content_item .evenNumbers,
.content .content_item .six {
  display: flex;
  flex-wrap: wrap;
  /* margin: 5px 0 0 15px; */
}
.content_item .six .van-image,
.content_item .nine .van-image {
  flex: 1;
  min-width: 33.333%;
  max-width: 33.333%;
}
.content_item .evenNumbers .van-image {
  flex: 1;
  width: 40%;
  min-width: 40%;
  max-width: 40%;
}
.content_item .evenNumbers .van-image:nth-child(1) {
  margin: 0 5px 5px 0;
}
.content_item .evenNumbers .van-image:nth-child(4) {
  margin: 5px 0 0 5px;
}
.content_item .evenNumbers .van-image:nth-child(1) /deep/ .van-image__img,
.six .van-image:nth-child(1) /deep/ .van-image__img,
.nine .van-image:nth-child(1) /deep/ .van-image__img {
  border-radius: 10px 0 0 0;
}
.content_item .evenNumbers .van-image:nth-child(2) /deep/ .van-image__img,
.six .van-image:nth-child(3) /deep/ .van-image__img,
.nine .van-image:nth-child(3) /deep/ .van-image__img {
  border-radius: 0 10px 0 0;
}
.content_item .evenNumbers .van-image:nth-child(3) /deep/ .van-image__img,
.six .van-image:nth-child(4) /deep/ .van-image__img,
.nine .van-image:nth-child(7) /deep/ .van-image__img {
  border-radius: 0 0 0 10px;
}
.content_item .evenNumbers .van-image:nth-child(4) /deep/ .van-image__img,
.six .van-image:nth-child(6) /deep/ .van-image__img,
.nine .van-image:nth-child(9) /deep/ .van-image__img {
  border-radius: 0 0 10px 0;
}
.EvenTwo .van-image:nth-child(1) /deep/ .van-image__img,
.three .van-image:nth-child(1) /deep/ .van-image__img {
  border-radius: 10px 0 0 10px !important;
}
.EvenTwo .van-image:nth-child(2) /deep/ .van-image__img,
.three .van-image:nth-child(3) /deep/ .van-image__img {
  border-radius: 0 10px 10px 0 !important;
}
</style>